<template>
  <div class="app-container">
    <p>count: {{ count }}--{{ $store.state.count }}</p>
    <p>double: {{ double }}</p>
    <div class="btn-wrap">
      <button @click="add">修改count</button>
      <button @click="asyncAdd">异步修改count</button>
    </div>
    <section>
      <h2>A 模块</h2>
      <p>aCount: {{ aCount }}</p>
      <button @click="addAcount">修改aCount</button>
      <h3>C 模块</h3>
      <p>cCount: {{ cCount }}</p>
      <button @click="addcCount">修改cCount</button>
    </section>
    <section>
      <h2>B 模块</h2>
      <p>bCount: {{ bCount }}</p>
      <button @click="addBcount">修改bCount</button>
    </section>
  </div>
</template>
<script>
  import { computed } from 'vue';
  import { useStore } from './vuex';
  export default {
    name: 'App',
    setup() {
      const store = useStore('my');
      // console.log('store', store);
      const add = () => {
        store.commit('add', 1);
      }
      const asyncAdd = () => {
        store.dispatch('asyncAdd', 2);
      }
      const addAcount = () => {
        store.commit('aCount/add', 1);
      }
      const addcCount = () => {
        store.commit('aCount/cCount/add', 1);
      }
      const addBcount = () => {
        store.commit('bCount/add', 1);
      }
      return {
        count: computed(() => store.state.count),
        double: computed(() => store.getters.double),
        aCount: computed(() => store.state.aCount.count),
        cCount: computed(() => store.state.aCount.cCount.count),
        bCount: computed(() => store.state.bCount.count),
        add,
        asyncAdd,
        addAcount,
        addcCount,
        addBcount,
      }
    }
  }
</script>
